<template>
  <div class="order-container">
    <div class="select-box">
        <van-search v-model="query.keyword" show-action placeholder="请输入订单号/手机号">
          <template #action>
            <div @click="onRefresh">搜索</div>
          </template>
        </van-search>
      </div>
    <div class="list-group1">
      <van-pull-refresh :disabled="refreshDisabled" v-model="isLoading" @refresh="onRefresh" pulling-text="加载中..." loosing-text="加载中..." loading-text="loading">
        <div class="list-group" ref="scrollbars" @scroll="scrollbarTop">
          <van-list loading-text="加载中" v-model="loading" :finished="finished" :finished-text="listData.length > 0 ? '没有更多了' : ''" @load="initAjaxMethod">
            <!-- @click="goToDetail(item)" -->
            <div class="list-box" v-for="(item,index) in listData" :key="index" >
              <div class="list-header">
                <span>订单:{{item.orderid}}</span>
              </div>
              <div class="demo-preview">
                <img alt="" :src="item.headerimg">
                <div class="demo-content">
                  <div class="demo-text">姓名:{{item.sname}}</div>
                  <div class="demo-text">电话:{{item.mobile}}</div>
                  <div class="demo-text">课程:{{item.kcname}}</div>
                </div>
              </div>
              <div class="list-boxs">
                <span>时间:{{item.createtime}}</span>
                <span>金额:¥{{item.price}}</span>
              </div>
            </div>
          </van-list>
          <empty v-if="listData.length == 0"></empty>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { getdate } from "@/utils/utils";
import { PullRefresh, List, Toast, Icon, Tag, Image, Search } from 'vant';
export default {
  name: "match",
  components: {
    [PullRefresh.name]: PullRefresh, [List.name]: List,
    [Icon.name]: Icon, [Tag.name]: Tag,
    [Image.name]: Image, [Search.name]: Search,
  },
  data() {
    return {
      refreshDisabled: false,
      loading: false,
      finished: true,
      isLoading: false,
      menuId: 3,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      query: {
        pageIndex: 1,
        pageSize: 10,
        keyword: ''
      },
      total: 0,
      listData: [],

    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return getdate(e);
    }
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    onSearch() {
      this.onRefresh();
    },
    scrollbarTop(e) {
      this.scrollTop = e.target.scrollTop;
      if (this.scrollTop > 100) {
        this.refreshDisabled = true;
      } else {
        this.refreshDisabled = false;
      }
    },
    onRefresh() {
      this.isLoading = true;
      this.query.pageIndex = 1;
      this.query.keyword = '';
      this.listData = [];
      this.finished = false;
      this.loading = true;
      this.$refs['scrollbars'].scrollTop = 0;
      this.initAjaxMethod();
    },
    goToDetail(data) {
      this.$router.push({ path: '/perOffice/signUp', query: { id: data.kcid } });
    },
    //列表加载
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_PEROFFICE_WORKMYORDER, this.query)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.isLoading = false;
            this.listData = this.query.pageIndex == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.query.pageIndex++;
            }
          }
        });
    }
  },
};
</script>
<style lang="less">
.order-container {
  .select-box {
    width: 100%;
    background: #fff;
  }
  .list-group1 {
    padding: 0 0.2rem;
  }
  .list-box {
    background: #fff;
    border-radius: 0.2rem;
    box-shadow: 1px 1px 5px -4px #000;
    overflow: hidden;
    margin-top: 0.2rem;
  }
  .list-header {
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0;
    padding:0 0.3rem;
    border-bottom:1px solid #eee;
    span {
      font-size: 0.3rem;
      font-weight: bold;
    }
  }
  .van-col {
    line-height: 0.36rem;
    font-size: 0.3rem;
    text-align: center;
  }
  .demo-preview {
    display: flex;
    padding: 0.1rem 0.3rem;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .demo-preview img {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    margin-top: 4px;
    background: #eee;
    border-radius: 50%;
  }
  .demo-text {
    margin: 0.12rem 0 0;
    font-size: 0.28rem;
    line-height: 0.4rem;
    color:#333;
  }
  .list-boxs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0 0.3rem;
  }
  .list-boxs span {
    font-size: 0.3rem;
    color: #888;
  }
  .detail-btn {
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    border-radius: 24px;
    font-size: 0.28rem;
    color: #fff;
    background: rgb(255, 153, 0);
    font-style: normal;
  }
}
</style>
  